<template>
<div>

<el-card class="box-card">
<div slot="header" class="clearfix">
    <span>退票审核列表</span>
</div>

	<el-row>

	<el-form :inline="true" :model="form" >
		<el-form-item >
			<daterange v-bind:se.sync="s_e" type="daterange"></daterange>
	    </el-form-item>

		<el-form-item >
		    <el-input v-model="form.order_code" placeholder="订单编号"></el-input>
		</el-form-item>

		<el-form-item >
		    <el-select v-model="form.ticket_state"  placeholder="状态">
		      <el-option 
		      v-for="item in ticket_state_arr"
		      :label="item.label" :value="item.value"></el-option>
		    </el-select>
		</el-form-item>

	    <!-- <el-form-item >
		    <el-input v-model="form.title" placeholder="订单名称"></el-input>
		</el-form-item>

		<el-form-item >
		    <el-input v-model="form.name" placeholder="游客姓名"></el-input>
		</el-form-item>
 -->
		<!-- <el-form-item >
		    <el-input v-model="form.mobile" placeholder="下单电话"></el-input>
		</el-form-item> -->

		<el-form-item>
		    <el-button type="primary" @click="onSubmit">查询</el-button>
		</el-form-item>

    </el-form>
    </el-row>

  	<el-row>
	<el-table
    :data="applyBackTicketList.results"
    border
    v-loading="loading"
    style="width: 100%" >
    	<el-table-column
	      label="产品信息"
	      width="300">
	      	<template slot-scope="scope">
	      	产品名：{{scope.row.title}}<br>
	      	型号名：{{scope.row.attr_name}}

	      	</template>

	    </el-table-column>
	    
	    <el-table-column
	      prop="order_code"
	      label="订单信息"
	      width="280">
	      	<template slot-scope="scope">
	      	订单编号：{{scope.row.order_code}}<br>
	      	下单时间：{{scope.row.create_time}}
	      	</template>
	    </el-table-column>

	    <el-table-column
	      label="顾客信息"
	      width="180">
	      	<template slot-scope="scope">
	      	姓名：{{scope.row.name}}<br>
	      	电话：{{scope.row.mobile}}
	      	</template>
	    </el-table-column>

	    <el-table-column
	      label="状态"
	      width="100">
	      	<template slot-scope="scope">
	      		<span v-if="scope.row.ticket_state == '1'">
	      			退票完成
	      		</span>
	      		<span v-else-if="scope.row.ticket_state == '2'">
	      			退票失败
	      		</span>
	      		<span v-else-if="scope.row.ticket_state == '5'">
	      			待审核
	      		</span>
	      	</template>
	    </el-table-column>


	    <el-table-column
	      fixed="right"
	      label="操作"
	      >
	      <template slot-scope="scope">
	        <el-button @click="apply(scope.row)" 
	        v-if="scope.row.ticket_state == '5'"
	        type="text" size="small">审核</el-button>
	      </template>
	    </el-table-column>
	</el-table>
	</el-row>	


	<el-row class="text-right mt20 mb20">
	<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="applyBackTicketList.totalRecord">
    </el-pagination>
    </el-row>
</el-card>


<el-dialog
  title="退票审核"
  :visible.sync="dialogVisible"
  width="50%">
  <span>
  	<el-input
	  type="textarea"
	  :rows="2"
	  placeholder="备注"
	  v-model="apply_note">
	</el-input>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="danger" @click="nopass">审核不通过</el-button>
    <el-button type="primary" @click="pass">审核通过</el-button>
  </span>
</el-dialog>

</div>
</template>

<script>

import { mapGetters } from 'vuex'
import { date2str, dateDiff } from '../../config/util'
import daterange from '../../components/daterange'

export default {
	
	name : 'applybackticket',
	
	data () {
		return {
		  	applyBackTicketList : {},

		  	pageNo : 1,
			pageSize : 10,
			totalRecord : 0,
			totalPage : 0,

			s_e : [date2str(new Date()), date2str(new Date())],

			loading : true,

			form : {
				order_code : '',
				mobile : '',
				ticket_state : '5',
			},

			dialogVisible : false,

			apply_note : '',

			current : {},

			ticket_state_arr : [
				{label : '不限制', value : undefined},
				{label : '退票完成', value : '1'},
				{label : '退票失败', value : '2'},
				{label : '待审核', value : '5'},
			],
		}
	},

	props : {

	},

	components : {
		daterange,
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		init () {
			const para = {
				fun : 'applyBackTicketList',
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				start_time : this.s_e[0] + ' 00:00:00',
				end_time : this.s_e[1] + ' 23:59:59',
				order_code : this.form.order_code,
				ticket_state : this.form.ticket_state,
				//mobile : this.form.mobile,
				cb : res => {
					console.log(res);
					this.applyBackTicketList = res;
					this.loading = false;
				},
				err : res => {
					this.loading = false;
					this.$notify.error({
			          title: '错误',
			          message: res,
			        });
				}
			};

			this.$store.dispatch('update', para);
		},

		onSubmit () {
			this.init();
		},

		handleSizeChange (val) {
			this.pageSize = val;
			this.init();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.init();
		},

		apply (item) {
			this.current = item;
			this.dialogVisible = true;
		},

		pass () {
			const para = {
				fun : 'applyBackTicketPass',
				id : this.current.id,
				apply_note : this.apply_note,
				cb : res => {
					console.log(res);
					this.$notify.success({
						title : '成功',
						message : '操作成功',
					});
					this.dialogVisible = false;
					this.current = {};
					this.init();
				},
				err : res => {
					this.$notify.error({
						title : '失败',
						message : res,
					});
				}
			};
			this.$store.dispatch('update', para);
		},

		nopass () {

			const para = {
				fun : 'applyBackTicketNoPass',
				id : this.current.id,
				apply_note : this.apply_note,
				cb : res => {
					console.log(res);
					this.$notify.success({
						title : '成功',
						message : '操作成功',
					});
					this.dialogVisible = false;
					this.current = {};
					this.init();
				},
				err : res => {
					this.$notify.error({
						title : '失败',
						message : res,
					});
				}
			};
			this.$store.dispatch('update', para);
		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
